// 导入 react 和 react-dom
import React from 'react';
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client';

/* 
    React 条件渲染：都是利用 JS 语法本身特点实现。
      常见条件渲染写法有：
        1. if/else 分支语句  
        2. 三元表达式  
        3. 短路运算&&
    
    🎯注意事项：React 没有指令的说法，都是利用 JS 语法本身特点实现。
*/

const isLoading = true;
// 写法1：JS的分支语句实现条件渲染
// const loadData = () => {
//   if (isLoading) {
//     return <div>数据加载中.....</div>;
//   } else {
//     return <div>数据加载完成，此处显示加载后的数据</div>;
//   }
// };

// 写法2：JS三元表达式实现条件渲染
// const loadData = () => {
//   return isLoading ? (
//     <div>数据加载中.....</div>
//   ) : (
//     <div>数据加载完成，此处显示加载后的数据</div>
//   );
// };

// 写法3：JS的短路运算实现条件渲染
const loadData = () => {
  return isLoading && <div>数据加载中...</div>;
};

const title = <div>条件渲染：{loadData()}</div>;

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(title);
